<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauges</title>
    <link rel="stylesheet" type="text/css" href="css/layout-default-latest.css" />
    <link rel="stylesheet" type="text/css" href="css/start/jquery-ui-1.9.0.custom.min.css" />
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/gauge.js"></script>
    <script>
        var gauge;
        function showGauge() {

            gauge = new Gauge({
                renderTo    : 'gauge',
                width       : 400,
                height      : 400,
                glow        : true,
                units       : 'Km/h',
                title       : false,
                minValue    : 0,
                maxValue    : 220,
                majorTicks  : ['0','20','40','60','80','100','120','140','160','180','200','220'],
                minorTicks  : 2,
                strokeTicks : false,
                highlights  : [
                    { from : 0,   to : 50, color : 'rgba(0,   255, 0, .15)' },
                    { from : 50, to : 100, color : 'rgba(255, 255, 0, .15)' },
                    { from : 100, to : 150, color : 'rgba(255, 30,  0, .25)' },
                    { from : 150, to : 200, color : 'rgba(255, 0,  225, .25)' },
                    { from : 200, to : 220, color : 'rgba(0, 0,  255, .25)' }
                ],
                colors      : {
                    plate      : '#222',
                    majorTicks : '#f5f5f5',
                    minorTicks : '#ddd',
                    title      : '#fff',
                    units      : '#ccc',
                    numbers    : '#eee',
                    needle     : { start : 'rgba(240, 128, 128, 1)', end : 'rgba(255, 160, 122, .9)' }
                }
            });


            gauge.draw();
        };
        function setData()
        {

        }

        function setGaugesValues(val)
        {
            setData();
        }

        $(document).ready(function () {

            $.ajax({
                type: "GET",
                url: "data/get_compare_data.xml",
                dataType: "xml",
                success: function(xml) {
                    xml_source = xml;
                    showGauge();
                }
            });
        });



        function max(limits)
        {
            var value = parseFloat(limits[0]);
            for(var i = 1; i < limits.length; i++)
            {
                if(value < parseFloat(limits[i]))
                    value = parseFloat(limits[i]);
            }

            return value;
        }

        function min(limits)
        {
            var value = parseFloat(limits[0]);
            for(var i = 1; i < limits.length; i++)
            {
                if(value > parseFloat(limits[i]))
                    value = parseFloat(limits[i]);
            }

            return value;
        }
        function refresh()
        {
            //var a =  Math.random() * 220;
            var a = parseFloat($('#val1').val());

            gauge.setValue(a);
            //alert(a);
        }
    </script>
</head>
<body>
<div style="margin-top: 10px; padding: 0 .7em;" class="ui-state-highlight ui-corner-all">
    <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-info"></span>
        <strong>Selected Plant:</strong> <span id="selectedPlants"> Bla bla bla bla </span></p>
</div>
<br />
<button onclick="refresh();">refresh</button>
<input id="val1" type="text" value="30"/>
<div id="gauges">
    <canvas id="gauge"></canvas>
</div>


</body>

</html>
